<template>
  <div id="svg-wrapper"></div>
</template>

<script>
import { Canvas, Rectangle, Circle } from "@/SeatDesigner";
const EVENT_LISTENER = {
  // key 是监听事件名，value 是事件触发的函数
  "figure:selected": "figureSelected"
};
export default {
  name: "SvgCanvas",
  components: {},
  props: {
    selectedTool: String
  },
  data() {
    return {
      // svgCanvas: null
    };
  },
  mounted() {
    this.svgCanvas = new Canvas("#svg-wrapper", "100%", "100%");
    this.initEventListener();
  },
  methods: {
    initEventListener() {
      Object.keys(EVENT_LISTENER).forEach(key => {
        let func = EVENT_LISTENER[key];
        this.svgCanvas.on(key, this[func]);
      });
    },
    figureSelected(figure) {
      this.$emit("figureSelected", figure);
    },
    rect() {
      let rect = new Rectangle();

      rect.setDimension(300, 100);
      rect.setPosition(100, 100);
      rect.setAlpha(0.3);
      rect.setRotationAngle(11);
      rect.setStroke(4);
      rect.setColor("red");
      rect.setBackgroundColor("blue");
      this.svgCanvas.addFigure(rect);
    },

    circle() {
      let c = new Circle();
      c.setDiameter(200).setPosition(0, 0);

      this.svgCanvas.addFigure(c);
    }
  },
  destroyed() {
    Object.keys(EVENT_LISTENER).forEach(key => {
      let func = EVENT_LISTENER[key];
      this.svgCanvas.removeListener(key, this[func]);
    });
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/variables.scss";
#svg-wrapper {
  width: 100%;
  height: 100%;
  padding-left: $toolBarWidth;
  padding-right: $attributeBarWidth;
  background: url("~@/assets/background.png");
}
</style>
